<template>
  <view class="profile">
    <view class="data-item-box">
      <!-- <view> 总金额(元) </view> -->
      <view> 总股票收益(U) </view>
      <view>
        {{
          formatCurrency(
            (userInfo.InvestmentAccount || 0) + (userInfo.Presented || 0)
          )
        }}
      </view>
    </view>
    <view class="data-item-box-container">
      <view class="data-item-box">
        <view> 昨日股票持仓释放(U)  </view>
        <view> {{ formatCurrency(0) }} </view>
      </view>

      <view class="data-item-box">
        <!-- <view> 目前持仓 </view> -->
        <view> 股票价值(U)  </view>
        <view> {{ formatCurrency(userInfo.TotalPerformance || 0) }} </view>
      </view>

      <view class="data-item-box">
        <view> 累计股票持仓释放(U)  </view>
        <view> {{ formatCurrency(0) }} </view>
      </view>
    </view>

    <view class="btn-check" @click="linkTo"> 查看业绩记录 </view>

    <view class="profile-content">
      <view class="profile-bar-process">
        <view class="profile-bar-process-title">
          <view class="line"></view>
          <view class="title-font"> 锁仓期释放进度 </view>
        </view>
        <view class="data-item-box-container">
          <view class="data-item-box">
            <view class="font-color-light text-left"> 锁仓总额 </view>
            <view class="font-color-bk text-left" style="margin-top: 10rpx">
              {{ formatCurrency(userInfo.LockupAmount || 0) }}
            </view>
          </view>

          <view class="data-item-box">
            <view class="font-color-light text-left"> 已释放金额 </view>
            <view class="font-color-bk text-left" style="margin-top: 10rpx">
              {{ formatCurrency(userInfo.ReleasedIncome || 0) }}
            </view>
          </view>
        </view>

        <tui-progress
          style="margin-top: 35rpx"
          activeColor="linear-gradient(to right,#5FECCC,#31D49D)"
          :percent="60"
          show-info
          color="#C2C2C2"
          :size="24"
        ></tui-progress>
      </view>

      <view class="profile-bar-process-title" style="margin: 40rpx 0 0">
        <view class="line"></view>
        <view class="title-font"> 收益明细 </view>
      </view>

      <view
        class="details-box"
        v-for="item in revenueRecord.dt || []"
        :key="item.ID"
      >
        <view class="details-box-line">
          <view> {{ formatDateTime(item.CreateTime, "YYYY/MM/DD") }} </view>
          <view @click="linkTo1()">
            <text>查看</text>
            <image src="@/static/images/profile/more.png" mode=""></image>
          </view>
        </view>
        <view class="data-item-box-container">
          <view class="data-item-box">
            <view class="font-color-light text-left"> 收益 </view>
            <view class="font-color-bk-30 text-left" style="margin-top: 10rpx">
              {{ formatCurrency(item.LiberateAmount || 0) }}
            </view>
          </view>

          <view class="data-item-box">
            <view class="font-color-light text-left"> 已释放金额 </view>
            <view class="font-color-bk-30 text-left" style="margin-top: 10rpx">
              {{ formatCurrency(item.LiberateAmount || 0) }}
            </view>
          </view>

          <view class="data-item-box">
            <view class="font-color-light text-left"> 锁仓金额 </view>
            <view class="font-color-bk-30 text-left" style="margin-top: 10rpx">
              {{ formatCurrency(item.LockupAmount || 0) }}
            </view>
          </view>
        </view>
      </view>
    </view>
    <logOut />
  </view>
</template>

<script setup>
import logOut from "../../components/custom/logOut.vue";
import { onShow } from "@dcloudio/uni-app";
import { ref } from "vue";
const userInfo = ref({});
const memberInfo = ref({});
const revenueRecord = ref({});
const linkTo = () => {
  uni.navigateTo({
    url: "/pagesA/record/record",
  });
};
const linkTo1 = () => {
  uni.navigateTo({
    url: "/pagesA/list/list",
  });
};
const formatDateTime = (utcDateString, format) => {
  // 创建一个 Date 对象
  const date = new Date(utcDateString);

  // 获取年月日时分秒
  const year = date.getFullYear(); // 年
  const month = String(date.getMonth() + 1).padStart(2, "0"); // 月 (0-11, 所以需要加1)
  const day = String(date.getDate()).padStart(2, "0"); // 日
  const hours = String(date.getHours()).padStart(2, "0"); // 时
  const minutes = String(date.getMinutes()).padStart(2, "0"); // 分
  const seconds = String(date.getSeconds()).padStart(2, "0"); // 秒
  // 替换格式字符串中的占位符
  return format
    .replace("YYYY", year)
    .replace("MM", month)
    .replace("DD", day)
    .replace("HH", hours)
    .replace("mm", minutes)
    .replace("ss", seconds);
};
const getListData = (access_token) => {
  getApp()
    .tui.request(
      `/ESOP_Member/LiberateRecord.ashx?pageSize=999&page=1`,
      "POST",
      {
        m: "getPageData",
        "Content-Type": "multipart/form-data",
        access_token,
      }
    )
    .then((res) => {
      console.log("列表信息res:", res);
      if (res.IsSuccess) {
        revenueRecord.value = res.Data || {};
      }
    })
    .catch((err) => {
      console.log("err:", err);
    });
};
const getInfoByEmail = (email, access_token) => {
  getApp()
    .tui.request(`/ESOP_Member/index.ashx?Email=${email}`, "POST", {
      m: "getInfoByEmail",
      "Content-Type": "multipart/form-data",
      access_token,
    })
    .then((res) => {
      console.log("用户信息res:", res);
      if (res.IsSuccess) {
        userInfo.value = res.Data;
      }

      console.log("userInfo.value", userInfo.value);
    })
    .catch((err) => {
      console.log("err:", err);
    });
};
// 获取会员信息
const getMemberInfo = (access_token) => {
  getApp()
    .tui.request(`/ESOP_Member/index.ashx`, "POST", {
      m: "getMemberInfo",
      "Content-Type": "multipart/form-data",
      access_token,
    })
    .then((res) => {
      console.log("会员信息res:", res);
      if (res.IsSuccess) {
        userInfo.value = res.Data;
      }
    })
    .catch((err) => {
      console.log("err:", err);
    });
};
onShow(() => {
  let tempProfile = getApp().tui.linkToLogin();
  if (tempProfile) {
    console.log("tempProfile.access_token:::", tempProfile.access_token);
    // getInfoByEmail(tempProfile.Email, tempProfile.access_token);
    getMemberInfo(tempProfile.access_token);
    getListData(tempProfile.access_token);
  }
});
const formatCurrency = (value) => {
  // 确保输入是一个数字
  if (isNaN(value)) {
    return "Invalid number";
  }
  // 定义单位
  const units = ["", "万", "亿", "万亿"];
  let unitIndex = 0;
  // 转换值为数值
  let number = Number(value);

  // 当数字大于等于10000时，继续转换
  while (number >= 10000 && unitIndex < units.length - 1) {
    number /= 10000;
    unitIndex++;
  }
  // 格式化结果，保留两位小数
  return `${number.toFixed(2)}${units[unitIndex]}`;
};
</script>

<style scoped lang="scss">
.profile {
  min-height: 100%;
  width: 100%;
  padding-top: 25rpx;
  background-image: url("@/static/images/profile/profileBg.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center -125rpx;
  padding-bottom: 100rpx;
  box-sizing: border-box;

  .data-item-box {
    text-align: center;
    flex: 1;

    view:first-child {
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 24rpx;
      color: rgba(255, 255, 255, 0.7);
    }

    view:nth-child(2) {
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 36rpx;
      color: #ffffff;
      // text-align: left;
    }
  }

  .fonts-69 {
    font-weight: 400;
    font-size: 69px;
  }

  .font-color-light {
    font-weight: 400 !important;
    font-size: 24rpx !important;
    color: #c2c2c2 !important;
  }

  .font-color-bk {
    font-weight: 550 !important;
    font-size: 43rpx !important;
    color: #202327 !important;
  }

  .font-color-bk-30 {
    font-weight: 600 !important;
    font-size: 30rpx !important;
    color: #202327 !important;
  }

  .title-font {
    font-family: PingFangSC, PingFang SC;
    font-weight: 600;
    font-size: 30rpx;
    color: #202327;
  }

  .text-left {
    text-align: left !important;
  }

  .data-item-box-container {
    display: flex;
    margin-top: 40rpx;
  }

  .btn-check {
    width: 214rpx;
    height: 64rpx;
    text-align: center;
    line-height: 64rpx;
    background: #ffffff;
    box-shadow: 0rpx 2rpx 4rpx 0rpx #0ab77c;
    border-radius: 34rpx;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 24rpx;
    color: #31d49d;
    margin: 0 auto;
    margin-top: 33rpx;
  }

  .profile-content {
    padding: 25rpx 30rpx;

    .profile-bar-process {
      padding: 20rpx;
      background: #ffffff;
      border-radius: 16px;
      box-shadow: 0px 0px 13px 0px rgba(49, 212, 157, 0.36);
    }

    .profile-bar-process-title {
      display: flex;
      align-items: center;

      .line {
        margin-right: 10rpx;
        width: 5px;
        height: 22px;
        background: #31d49d;
        border-radius: 3px;
      }
    }

    .details-box:nth-child(1) {
      margin-top: 40rpx !important;
    }
    .details-box {
      margin-top: 20rpx;
      width: 100%;
      background: #ffffff;
      padding: 30rpx;
      box-sizing: border-box;
      box-shadow: 0px 0px 11px 0px rgba(49, 212, 157, 0.19);
      border-radius: 16px;

      .details-box-line {
        display: flex;
        align-items: center;
        justify-content: space-between;

        view:nth-child(1) {
          font-weight: 400;
          font-size: 24rpx;
          color: #202327;
        }

        view:nth-child(2) {
          font-weight: 400;
          font-size: 24rpx;
          color: #31d49d;
          display: flex;
          align-items: center;
        }

        image {
          width: 30rpx;
          height: 30rpx;
          margin-left: 2rpx;
        }
      }
    }
  }
}
</style>